<template>
    <div>
        <Slider></Slider>
        <div class="first center-page">
            <div class="up">
                <el-card
                    class="up-card up-block"
                    shadow="never"
                >
                    <el-form>
                        <el-form-item>
                            <el-input
                                placeholder="管理员账号"
                                v-model="username"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input
                                type="password"
                                placeholder="密码"
                                v-model="password"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox label="记住密码"></el-checkbox>
                            <el-link
                                :underline="false"
                                type="primary"
                                style="vertical-align: top; float:right"
                            >忘记密码？</el-link>
                        </el-form-item>
                        <el-button
                            type="primary"
                            style="width:100%"
                            @click="toAdmin"
                        >管理员登录</el-button>
                        <el-form-item>
                            仅限公司内部人员使用
                            <el-link
                                :underline="false"
                                type="primary"
                                @click="toRegister"
                            >免费注册</el-link>
                        </el-form-item>
                        <el-form-item>
                            站内搜索
                            <el-input>
                                <el-button
                                    slot="append"
                                    icon="el-icon-search"
                                ></el-button>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
                <div
                    class="up-block up-quanty"
                    style="margin-right: 56px;"
                >
                    <el-image :src="image1"></el-image>
                    <div class="up-quanty-title-en">
                        {{quantyUrban.titleEn}}
                    </div>
                    <div class="up-quanty-title-zh">
                        {{quantyUrban.titleZh}}
                    </div>
                    <div class="up-quanty-content">
                        &nbsp;&nbsp;&nbsp;&nbsp;{{quantyUrban.content}}
                    </div>
                </div>
                <div
                    class="up-block up-quanty"
                    style="margin-right: 56px;"
                >
                    <el-image :src="image2"></el-image>
                    <div class="up-quanty-title-en">
                        {{quantyMine.titleEn}}
                    </div>
                    <div class="up-quanty-title-zh">
                        {{quantyMine.titleZh}}
                    </div>

                    <div class="up-quanty-content">
                        &nbsp;&nbsp;&nbsp;&nbsp;{{quantyMine.content}}
                    </div>
                </div>
                <div class="up-block up-quanty">
                    <el-image :src="image3"></el-image>
                    <div class="up-quanty-title-en">
                        {{quantyEngine.titleEn}}
                    </div>
                    <div class="up-quanty-title-zh">
                        {{quantyEngine.titleZh}}
                    </div>

                    <div class="up-quanty-content">
                        &nbsp;&nbsp;&nbsp;&nbsp;{{quantyEngine.content}}
                    </div>
                </div>

            </div>
            <div class="down">
                <el-card
                    class="down-card down-block"
                    shadow="never"
                >
                    <div class="first-power">
                        <el-button
                            icon="el-icon-user-solid"
                            @click="toSupport"
                        >软件试用</el-button>
                    </div>
                    <div class="first-power">
                        <el-button
                            icon="el-icon-monitor"
                            @click="toSupport"
                        >操作手册</el-button>
                    </div>
                    <div class="first-power">
                        <el-button
                            icon="el-icon-document"
                            @click="toSupport"
                        >产品彩页</el-button>
                    </div>
                    <div class="first-power">
                        <el-button
                            icon="el-icon-video-camera"
                            @click="toSupport"
                        >视频演示</el-button>
                    </div>
                </el-card>
                <el-card
                    class="down-card-2 down-block"
                    shadow="never"
                >
                    <div slot="header">
                        <div style="width:5px; height:30px;background: #63b2f5; float: left; margin-right: 20px;"></div>
                        <span class="card-title">行业资讯</span>
                        <el-button
                            type="primary"
                            size="medium"
                            style="float: right;"
                            @click="toIndustryInformation"
                        >MORE</el-button>
                    </div>
                    <div class="info">
                        <img
                            :src="showUrl + information.id"
                            alt=""
                            align="left"
                            vspace="0"
                            hspace="0"
                        />
                        <p class="title">{{information.title}}</p>
                        <p
                            class="content"
                            v-html="information.content"
                        ></p>
                    </div>

                </el-card>
                <el-card
                    class="down-card-3 down-block"
                    shadow="never"
                >
                    <div slot="header">
                        <div style="width:5px; height:30px;background: #63b2f5; float: left; margin-right: 20px;"></div>
                        <span class="card-title">公司动态</span>
                        <el-button
                            type="primary"
                            size="medium"
                            style="float: right;"
                            @click="toMoreDynamic"
                        >MORE</el-button>
                    </div>
                    <ul>
                        <li
                            v-for="item in companyDynamic"
                            :key="item.id"
                        >
                            <div style="border-bottom:1px dashed orange;">
                                <i class="el-icon-caret-right"></i>
                                <el-link @click="toDynamic(item.id)">{{item.title}}</el-link>
                                <label style="float:right">{{item.createDate}}</label>
                            </div>
                        </li>
                    </ul>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
import Slider from "../Slide";
export default {
    data() {
        return {
            image1: require("@/assets/images/first/QuantyUrban.jpg"),
            image2: require("@/assets/images/first/QuantyMine.jpg"),
            image3: require("@/assets/images/first/QuantyEngine.jpg"),
            information: { id: 0 },
            companyDynamic: [],
            username: "",
            password: "",
            showUrl: this.$uploadPath + "/industry/getImage?id=0",
            quantyUrban: {},
            quantyMine: {},
            quantyEngine: {}
        };
    },
    methods: {
        // 跳转到注册页面
        toRegister() {
            this.$alert("暂不支持用户注册", "提示");
            // this.$router.push("/register").catch(err => err);
        },
        // 跳转到修改密码页面
        toEditPassword() {
            this.$router.push("/editPassword").catch(err => err);
        },
        // 跳转到后台管理页面
        toAdmin() {
            if (this.username == "" || this.password == "") {
                return false;
            }
            this.$http(
                "/user/login?username=" +
                    this.username +
                    "&password=" +
                    this.password
            ).then(response => {
                if (response.data.success == "true") {
                    this.$router.push("/admin").catch(err => err);
                } else {
                    this.$message({
                        message: response.data.message,
                        type: "error"
                    });
                }
            });
        },
        toDynamic(id) {
            this.$router
                .push({ path: "/companyDynamic", query: { id: id } })
                .catch(err => err);
        },
        toIndustryInformation() {
            this.$router.push("/industryInformation").catch(err => err);
        },
        toSupport() {
            this.$router.push("/technicalSupport").catch(err => err);
        },
        toMoreDynamic() {
            this.$router.push("/moreDynamic").catch(err => err);
        },
        // 获取外面的三个信息
        getQuanties() {
            this.$http("/product/getFirstProduct").then(response => {
                for (var i = 0; i < response.data.length; i++) {
                    if (response.data[i]["titleEn"] == "QuantyEngine") {
                        this.quantyEngine = response.data[i];
                        this.quantyEngine["content"] =
                            this.getSimpleText(
                                this.quantyEngine["content"]
                            ).substring(0, 100) + "……";
                    } else if (response.data[i]["titleEn"] == "QuantyUrban") {
                        this.quantyUrban = response.data[i];
                        this.quantyUrban["content"] =
                            this.getSimpleText(
                                this.quantyUrban["content"]
                            ).substring(0, 100) + "……";
                    } else if (response.data[i]["titleEn"] == "QuantyMine") {
                        this.quantyMine = response.data[i];
                        this.quantyMine["content"] =
                            this.getSimpleText(
                                this.quantyMine["content"]
                            ).substring(0, 100) + "……";
                    }
                }
            });
        },
        toUrban() {
            this.$router.push("/QuantyUrban");
        },
        // 获取最新的公司动态
        getRecentDynamic() {
            this.$http("/companyDynamic/getRecentDynamic").then(response => {
                this.companyDynamic = response.data;
            });
        },
        // 获取最新的行业资讯
        getNewInformation() {
            this.$http("/industry/getNewInformation").then(response => {
                this.information = response.data;
                // 1.将获取到的富文本提取其中的纯文本
                // 2.截取纯文本的前面N个字符
                this.information["content"] =
                    this.getSimpleText(this.information["content"]).substring(
                        0,
                        150
                    ) + "……";
            });
        }
    },
    components: {
        Slider
    },
    mounted() {
        this.getRecentDynamic();
        this.getNewInformation();
        this.getQuanties();
    }
};
</script>

<style>
.first .up {
    height: 340px;
}
.first .up .up-block {
    display: inline-block;
    vertical-align: top;
}
.first .up .up-card {
    background-color: #e3eaf2;
    width: 250px;
    height: 100%;
    margin-right: 40px;
}
.first .up .up-card .el-form .el-form-item {
    margin-bottom: 5px;
}
.first .up .up-quanty {
    width: 260px;
    height: 100%;
}
.first .up .up-quanty .el-image {
    margin-top: 0px;
    height: 124px;
}

.first .up .up-quanty .up-quanty-title-en {
    height: 28px;
    text-align: center;
    font-family: "微软雅黑";
    font-size: 18px;
    color: #017ad5;
    line-height: 36px;
    font-weight: bold;
}
.first .up .up-quanty .up-quanty-title-zh {
    height: 34px;
    text-align: center;
    font-family: "微软雅黑";
    font-size: 18px;
    color: #017ad5;
    line-height: 34px;
    font-weight: bold;
}
/* .first .up .up-quanty .up-quanty-content {
    font-size: 14px;
    font-family: "微软雅黑";
    line-height: 26px;
} */

.first .down {
    margin-top: 40px;
    height: 230px;
}
.first .down .down-block {
    display: inline-block;
    vertical-align: top;
}
.first .down .down-card {
    background-color: #e3eaf2;
    width: 250px;
    height: 100%;
    margin-right: 40px;
}
.first .down .down-card .first-power .el-button {
    width: 100%;
    margin-bottom: 10px;
}

.first .down .down-card-2 {
    width: 444px;
    height: 100%;
    border: none;
    margin-right: 34px;
}
.first .down .down-card-2 .el-card__header {
    padding: 0px 0px;
    height: 42px;
}
.first .down .down-card-2 .el-card__body {
    padding: 0px;
}
.first .down .down-card-2 .info {
    width: 100%;
}
.first .down .down-card-2 .info img {
    width: 80px;
    height: 80px;
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 10px;
}
.first .down .down-card-2 .info .title {
    font-family: "黑体";
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0;
}
.first .down .down-card-2 .info .content {
    margin-top: 11px;
}
.first .down .down-card-3 {
    width: 420px;
    height: 100%;
    border: none;
}
.first .down .down-card-3 .el-card__header {
    padding: 0px 0px;
    height: 42px;
}
.first .down .down-card-3 .el-card__body {
    padding: 0px;
}
.first .down .card-title {
    font-family: "黑体";
    color: #017ad5;
}
.first .down ul {
    padding-inline-start: 0px;
    margin-block-start: 5px;
}
.first .down ul li {
    list-style: none;
}
.first .down ul li i {
    color: orange;
    margin-top: 0px;
    vertical-align: middle;
}
.first .down .el-link--inner,
label {
    font-size: 10px;
    color: black;
}
.up-quanty-content,
.first .down .down-card-2 .info .content,
.first .down .el-link--inner,
.first .down label {
    font-size: 14px;
    font-family: "微软雅黑";
    line-height: 26px;
    color: #5f6464;
}
.up-quanty-content {
    width: 260px;
    position: absolute;
    margin-bottom: 0;
}
</style>